<template>
  <div
    class="card-item-container"
    :class="{ active: active }"
    ref="item"
    @click="goCardDetail"
  >
    <span class="count" v-if="count >= 1">{{ count }}</span>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
export default {
  name: "CardItem",
  components: {},
  props: {
    count: { type: Number, require: true },
    active: { type: Boolean, default: false },
    index: { type: Number, require: true },
  },
  data() {
    return {};
  },
  computed: {
    ...mapGetters("activity", {
      user: "user",
    }),
  },
  watch: {},
  created() {},
  mounted() {
    // 获取距离
    const left =
      this.$refs.item.clientWidth / 2 +
      this.getCardPositionLeft(this.$refs.item);
    const top =
      this.$refs.item.clientHeight / 2 +
      this.getCardPositionTop(this.$refs.item);
    this.getCardItemPosition({ left, top });
  },
  methods: {
    getCardItemPosition(obj) {
      this.$emit("getCardItemPosition", obj);
    },
    getCardPositionLeft(el) {
      return (
        el.offsetLeft +
        (+el.offsetParent ? this.getCardPositionLeft(el.offsetParent) : 0)
      );
    },
    getCardPositionTop(el) {
      return (
        el.offsetTop +
        (+el.offsetParent ? this.getCardPositionTop(el.offsetParent) : 0)
      );
    },
    goCardDetail() {
      if (this.$route.name === "activityHome")
        this.$emit("goCardDetail", this.index);
      if (this.$route.name === "cardDetail") {
        this.setDetailIndex(this.index);
        this.$emit("changeActive", this.index);
      }
    },
    ...mapMutations("activity", {
      setDetailIndex: "setDetailIndex",
    }),
  },
};
</script>

<style scoped lang='less'>
.card-item-container {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  border-radius: 6px;

  &.active {
    box-shadow: 0 0 0 2px #ffe6c9;
  }
  .count {
    position: absolute;
    top: -8px;
    right: -8px;

    display: flex;
    justify-content: center;
    align-content: center;
    border-radius: 50%;

    width: 20px;
    height: 20px;
    background: linear-gradient(180deg, #ffcf8c 0%, #cd9b73 100%);

    font-size: 17px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #ffffff;
  }
}
</style>